<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
  <div>
    <div align="center">
      <el-card style="width: 1500px" align="center">
        <el-row>

          <el-col :span="7">
            <el-input placeholder="请输入查询内容" v-model="quaryInfo.quary" clearable @clear="getCustomMessage"></el-input>
          </el-col>
          <el-col  :span="1">
            <el-button type="primary" icon="el-icon-search" @click="getCustomMessage">搜索</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4"></el-col>
          <el-col>
            <el-table :data="customlist" border stripe style="width: 100%" align="center" height="700">
              <el-table-column prop="customID" v-if="show=false"></el-table-column>
              <el-table-column prop="customName" label="姓名" width="100%"></el-table-column>
              <el-table-column prop="state" label="状态" width="100%"></el-table-column>
              <el-table-column prop="mobile" label="电话号码" width="100%"></el-table-column>
              <el-table-column prop="province" label="省份" width="100%"></el-table-column>
              <el-table-column prop="city" label="市区" width="100%"></el-table-column>
              <el-table-column prop="address" label="地址" width="300%"></el-table-column>
              <el-table-column prop="postNum" label="邮编" width="100%"></el-table-column>
              <el-table-column prop="date" label="日期" width="200%"></el-table-column>
              <el-table-column  label="详情" width="500">
                <template >
                  <el-button type="primary" icon="el-icon-search" @click="handleDetails()">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="quaryInfo.PageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="quaryInfo.PageSize"
              layout=" sizes, prev, pager, next, total, jumper"
              :total="total">
            </el-pagination>
          </el-col>
        </el-row>
      </el-card>
      <el-dialog
        title="详情"
        :visible.sync="dialogVisible"
        width="30%" @close="dialogVisible = false">
        <template>
          <div>
          <el-image :src="require('../assets/example/1.jpg')">

          </el-image>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>

  export default {

    data() {
      return {
        quaryInfo:{
          quary:'',
          PageNum:1,
          PageSize:10
        },
        total:0,
        dialogVisible: false,
        dashujudialogVisible:false,
        fanzuidialogVisible:false,
        customlist:[],
        message:'',
        progressNum: 10,
        src:'../assets/example/1.jpg'
      }
    },
    created(){
      this.getCustomMessage()
    },
    methods:{
      async getCustomMessage(){
        const {data:res}=await this.$http.get('neishen/readNeishen',{params:this.quaryInfo})
        this.customlist = res.Custom
        this.total=res.total
        this.PageSize=res.PageSize
        this.PageNum=res.PageNum
      },

      handleSizeChange(NewSize){
        this.quaryInfo.PageSize = NewSize
        this.getCustomMessage()

      },
      handleCurrentChange(NewPage){
        this.quaryInfo.PageNum = NewPage
        this.getCustomMessage()
      },
      handleDetails(){
          this.dialogVisible=true
      }
    }
  }
</script>
<style scoped>
  label{
    font-size: 12px;
    color: green;
  }
</style>
